import React from 'react';
import LogFactory from "log/LogFactory";
import {Card, Table} from "antd";
import partColumns from "columns/PartColumns";
import TableToolbar from "common/table/TableToolbar";
import {ReduxStatus} from "enum/ReduxStatus";
import {Part} from "type/Part";

import {useAppDispatch, useAppSelector} from "../../../redux/hook";
import {fetchFuzzyPart, fetchPageData} from "../../../redux/reducer/async/partAsyncAction";
import DrpSettingHandler from "../DrpSettingHandler";
import Highlight from "../Highlight";

const log = LogFactory.getLog("PartComponent");
const PartComponent = () => {
    const state = useAppSelector(state=>state.part) ;
    const dispatch = useAppDispatch() ;

    if (state.status === ReduxStatus.INIT){
        dispatch(fetchPageData({current: state.current,pageSize: state.pageSize})) ;
    }
    if (state.status === ReduxStatus.REFRESH){
        dispatch(fetchPageData({current: state.current,pageSize: state.pageSize})) ;
    }
    const refresh = () => {
        dispatch(fetchPageData({current: state.current,pageSize: state.pageSize})) ;
    } ;
    const onSearch = async (value: string) => {
        if (value === ""){
            Highlight.getInstance().clearKeyword() ;
            dispatch(fetchPageData({current: 1,pageSize: DrpSettingHandler.getInstance().getConfig().partPageSize})) ;
            return ;
        }
        // log.debug("搜索零件数据",value);
        Highlight.getInstance().setKeyword(value) ;
        await dispatch(fetchFuzzyPart(value)) ;
    } ;
    const onChange = async (page: number, pageSize: number) => {
        dispatch(fetchPageData({current: page,pageSize: pageSize})) ;
    } ;

    return (
        <Card title={"零件列表"}>
            <TableToolbar titleContent={state.total} showSearch={true} refresh={refresh} searchPlaceholder={"请输入要索引的零件名"} onSearch={onSearch}/>
            <Table<Part>
                scroll={{x: 1200}}
                loading={state.loading}
                columns={partColumns}
                dataSource={state.data}
                pagination={{
                    onChange: onChange ,
                    current: state.current,
                    pageSize: state.pageSize ,
                    total: state.total
                }}
            >
            </Table>
        </Card>
    );
};

export default PartComponent;